<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>搜索界面</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<style type="text/css">
			#hui-header-sreach {
				width: 75%;
				height: 32px;
				padding: 0px !important;
				line-height: 32px;
				position: absolute;
				z-index: 21;
				left: 45px;
				top: 6px;
			}
			
			#hui-header-sreach input {
				width: 100%;
				height: 32px !important;
				line-height: 32px !important;
				margin: 0px !important;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				border-radius: 5px;
				border: 0;
				background: #EFF3F6;
				font-size: 14px;
				text-indent: 30px;
			}
			
			#hui-header-sreach::after {
				font-family: "hui-font";
				content: '\e714';
				display: block;
				position: absolute;
				z-index: 22;
				width: 28px height:32px;
				left: 5px;
				top: 0;
			}
			
			#hui-hot-sreach {
				background: #FFFFFF;
				padding: 10px;
			}
			
			#hui-hot-sreach-title {
				line-height: 38px;
				font-size: 16px;
				font-weight: 700;
			}
			
			#hui-hot-sreach-keys {
				margin-top: 8px;
			}
			
			#hui-hot-sreach-keys a {
				display: block;
				border-radius: 5px;
				float: left;
				margin: 0 8px 8px 0px;
				padding: 6px 10px;
				line-height: 20px;
				font-size: 13px;
				background: #EFF3F6;
			}
		</style>
	</head>

	<body style="background:#F4F5F6;">
		<header class="hui-header">
			<div id="hui-back"></div>
			<div id="hui-header-sreach">
				<input type="search" id="searchKey" placeholder="请输入关键字" />
			</div>
		</header>
		<div class="hui-wrap">
			<div id="hui-hot-sreach">
				<div id="hui-hot-sreach-title">热门搜索</div>
				<div id="hui-hot-sreach-keys">
					<a href="javascript:hotSearch('择天记');">择天记</a>
					<a href="javascript:hotSearch('人民的名义');">人民的名义</a>
					<a href="javascript:hotSearch('琅琊榜');">琅琊榜</a>
					<a href="javascript:hotSearch('我的兄弟叫顺溜');">我的兄弟叫顺溜</a>
					<a href="javascript:hotSearch('欢乐颂');">欢乐颂</a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/mui.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/hui/hui.js" charset="UTF-8"></script>
		<script type="text/javascript">
			mui.init();

			var search_arr = ['择天记', '人民的名义', '琅琊榜', '我的兄弟叫顺溜', '欢乐颂'];

			mui.plusReady(function() {
				var _self = plus.webview.currentWebview();
				console.log(_self.name);
			})

			// 监听搜索按钮时间
			document.getElementById('searchKey').addEventListener('keyup', function(e) {
				if(e.keyCode == 13) {
					searchNow();
				}
			});

			function hotSearch(k) {
				hui('#searchKey').val(k);
				searchNow();
			}

			function searchNow() {
				document.activeElement.blur();
				var kwd = hui('#searchKey').val();
				kwd = kwd.trim();
				if(kwd.length < 2) {
					hui.toast('关键字至少2个字符');
					return false;
				}
				hui.toast('搜索 ' + kwd);
				var flag = false;
				for(var i = 0; i < search_arr.length; i++) {
					if(kwd === search_arr[i]) {
						flag = true;
						break;
					}
				}

				if (!flag) {
					var hot_sreach_keys = document.getElementById('hui-hot-sreach-keys');
					var a_tag = document.createElement('a');
					a_tag.href = 'javascript:hotSearch("' + kwd + '")';
					a_tag.innerHTML = kwd;
					hot_sreach_keys.appendChild(a_tag);
					search_arr.push(kwd);
				}
			}
		</script>
	</body>

</html>